<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
      }
      #d1 {
        --width: 400px;
        --height: 220px;
        --puzzle-width: 80px;
        --puzzle-height: 80px;
        --moved: 0px;
        width: var(--width);
        height: var(--height);
        position: relative;
        background-image: url(https://images.unsplash.com/photo-1624789391616-c274f067f8ee?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxNXx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60);
        background-size: cover;
        background-position: center;
        box-shadow: 0 0 2px 2px #ccc;
      }
      #d1::after,
      #d1::before {
        position: absolute;
        content: '';
        width: inherit;
        height: inherit;
        background-position: inherit;
        background-size: inherit;
        background-image: inherit;
        /* background-color: red; */
        clip-path: inset(calc((var(--height) - var(--puzzle-height)) / 2) var(--puzzle-width) calc((var(--height) - var(--puzzle-height)) / 2) calc(var(--width) - var(--puzzle-width) * 2));
        -webkit-clip-path: inset(calc((var(--height) - var(--puzzle-height)) / 2) var(--puzzle-width) calc((var(--height) - var(--puzzle-height)) / 2) calc(var(--width) - var(--puzzle-width) * 2));
      }
      #d1::after {
        transform: translateX(clamp(var(--width) * -1, (var(--width) * -1) + var(--moved), var(--puzzle-width)));
        transition: 0.25s all ease-in-out;
      }
      #d1:active::after {
        transition: none;
      }
      #d1::before {
        background-color: rgba(0, 0, 0, 0.6);
        /* 将半透明的黑色 与背景图片混合到一起 */
        background-blend-mode: multiply;
      }
      #handle {
        position: absolute;
        width: calc(var(--width) + var(--puzzle-width) * 2);
        height: 30px;
        border-radius: 18px;
        background-color: #eee;
        bottom: -50px;
        left: calc(var(--puzzle-width) * 2 * -1);
        box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.2);
        border: 3px solid #ccc;
      }
      #handle span {
        display: block;
        width: var(--puzzle-width);
        height: inherit;
        border-radius: inherit;
        background-color: #fff;
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.3);
        position: absolute;
        cursor: move;
        /* clamp()  第一个是最小值  第二个是 --moved的值  第三个是最大值 */
        transform: translateX(clamp(0px, var(--moved), (var(--width) + var(--puzzle-width))));
        transition: 0.25s all ease-in-out;
      }
      #d1:active #handle span {
        transition: none;
      }
      #d1.passed::after,
      #d1.passed::before,
      #d1.passed #handle {
        opacity: 0;
      }
    </style>
  </head>
  <body>
    <div id="d1">
      <div id="handle">
        <span></span>
      </div>
    </div>
  </body>
  <script>
    let shouldMove = false
    const d1 = document.querySelector('#d1')
    const handle = document.querySelector('#handle')
    const button = document.querySelector('#handle span')
    // 点击下去的时候
    button.addEventListener('mousedown', (e) => {
      shouldMove = true
    })
    // 移动的时候
    window.addEventListener('mousemove', (e) => {
      if (shouldMove) {
        // 获取拉动杆与画面左边的位移
        const offsetLeft = handle.getBoundingClientRect().left
        // 获取按钮的宽度
        const buttonWidth = button.getBoundingClientRect().width

        // 游标的X位置 减移动杆与左边的距离 再减按钮宽度除2  除2(中心点设定到按钮的中间位置)
        d1.style.setProperty('--moved', `${e.clientX - offsetLeft - buttonWidth / 2}px`)
      }
    })
    // 放手的时候
    window.addEventListener('mouseup', (e) => {
      if (shouldMove) {
        const finalOffset = e.clientX - handle.getBoundingClientRect().left
        console.log(finalOffset)
        if (finalOffset >= 430 && finalOffset <= 450) {
          d1.classList.add('passed')
        } else {
          d1.style.setProperty('--moved', '0px')
        }
        shouldMove = false
      }
    })
  </script>
</html>
